<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>SectionPlanesPlugin</title>
    <link href="../css/pageStyle.css" rel="stylesheet" type="text/css"/>

    <style>

        #myCanvas {
            width: 100%;
            height: 100%;
            background: lightBlue;
            z-index: 200000;
        }

        #container {
            position: absolute;
            top: 0;
            z-index: 200000;
            float: right;
            right: 0;
            padding: 10px;
            height: auto;
            text-align: left;
            background: RGBA(0, 0, 0, 0.4);
            max-width: 300px;
            color: white;
        }

        #visibleDiv {
            width: 500px;
            height: 300px;
            background: green;
        }

        #invisibleDiv {
            width: 500px;
            height: 300px;
            background: red;
            display: none;
        }

        #mySectionPlanesOverviewCanvas {
            width: 250px;
            height: 250px;
            bottom: 70px;
            right: 10px;
        }

    </style>

</head>

<body>

<canvas id="myCanvas"></canvas>


<div id="container">
    <h1>Section planes bug reproduce</h1><br>
    <ul>
        <li>
            <a href="javascript:moveCanvasIntoVisibleDiv()"
               target="_other">moveCanvasIntoVisibleDiv()</a>
        </li>
        <li>
            <a href="javascript:moveCanvasIntoInvisibleDiv()"
               target="_other">moveCanvasIntoInvisibleDiv()</a>
        </li>

    </ul>

    <div id="visibleDiv">
        <canvas id="mySectionPlanesOverviewCanvas"></canvas>
    </div>

    <div id="invisibleDiv">

    </div>
</div>

</body>

<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {Viewer, XKTLoaderPlugin, SectionPlanesPlugin} from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.camera.eye = [-5.02, 2.22, 15.09];
    viewer.camera.look = [4.97, 2.79, 9.89];
    viewer.camera.up = [-0.05, 0.99, 0.02];
    viewer.camera.project.fov = 45;

    viewer.camera.zoom(5);

    //------------------------------------------------------------------------------------------------------------------
    // Add a XKTModelsPlugin - we'll use this to load the model geometry
    //------------------------------------------------------------------------------------------------------------------

    const xktLoader = new XKTLoaderPlugin(viewer);

    //------------------------------------------------------------------------------------------------------------------
    // Add a SectionPlanesPlugin - we'll use this to create cross-section planes
    //------------------------------------------------------------------------------------------------------------------

    const sectionPlanes = new SectionPlanesPlugin(viewer, {
        overviewCanvasId: "mySectionPlanesOverviewCanvas",
        overviewVisible: true
    });

    //------------------------------------------------------------------------------------------------------------------
    // Load the .xkt model and IFC metadata
    //------------------------------------------------------------------------------------------------------------------

    const sceneModel = xktLoader.load({
        id: "myModel",
        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt", // Creates a MetaObject instances in scene.metaScene.metaObjects
        edges: true,
        backfaces: true // Sometimes it's best to show backfaces, so that sliced objects look less odd
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a couple of cross-section planes
    //------------------------------------------------------------------------------------------------------------------

    sectionPlanes.createSectionPlane({
        id: "mySectionPlane",
        pos: [1.04, 1.95, 9.74],
        dir: [1.0, 0.0, 0.0]
    });

    sectionPlanes.createSectionPlane({
        id: "mySectionPlane2",
        pos: [2.30, 4.46, 14.93],
        dir: [0.0, -0.09, -0.79]
    });


    window.viewer = viewer;

    const canvas = document.getElementById("mySectionPlanesOverviewCanvas");
    const visibleDiv = document.getElementById("visibleDiv");
    const invisibleDiv = document.getElementById("invisibleDiv");

    window.moveCanvasIntoInvisibleDiv = function () {
        invisibleDiv.appendChild(canvas);
    };

    window.moveCanvasIntoVisibleDiv = function () {
        visibleDiv.appendChild(canvas);
    };

</script>

</html>